import React from 'react'
import CmtItem from '@/components/CmtItem2'
//bootstrap样式表,如果引用某个包，安装到了node_modules目录中，可以省略node_modules这一层目录。直接以包名开始引入自己的模块
//规定第三方样式表以.css结尾，自己的样式表用.scss或者.less结尾
import bootcss from 'bootstrap/dist/css/bootstrap'
//直接导入的css样式表，整个项目全局生效，样式表没有作用域
import cssobj from '@/css/cmtlist'
console.log('cmtlist=')
console.log(cssobj)

//定义父组件
export default class CmtList extends React.Component{
    constructor(){
        super()
        this.state={
            CommentList:[
                {id:1, user:'张三',cotent:'hello,java'},
                {id:2, user:'李四',cotent:'hello,js'},
                {id:3, user:'王五',cotent:'hello,react'},
                {id:4, user:'赵六',cotent:'hello,vue'},
                {id:5, user:'孙七',cotent:'hello,c'},
                {id:6, user:'刘八',cotent:'hello,c++'}
            ]
        }
    }
    render(){
        return <div>
            {/* 在jsx中如果想在行内写样式，不能写string格式 */}
            {/* <h1 className={cssobj.title + ' test'}>这是评论列表组件</h1> */}
            {/* <button className={[bootcss.btn,bootcss['btn-primary']].join(' ')}>按钮</button> */}
            <h1 className={[cssobj.title,'test'].join(' ')}>这是评论列表组件</h1>
            <button className='btn btn-primary'>按钮</button>
            {this.state.CommentList.map(item=><CmtItem {...item} key={item.id}></CmtItem>)}
        </div>
    }
}